const path = require('path');
const glob = require('glob');
const uglify= require("uglifyjs-webpack-plugin"); // js代码压缩插件
const htmlPlugin = require("html-webpack-plugin"); // html打包插件
const extractTextPlugin=require('extract-text-webpack-plugin');
const purifyCssPlugin = require('purifycss-webpack'); //消除无用css插件
const webpack = require('webpack');
const entry = require('./webpack_config/entry');


// 接受type是什么环境输出
console.log(encodeURIComponent(process.env.type));
if(process.env.type=="build"){
    var website = {
        publicPath : "http://jspang.com:8080/"
    }
}else{
    var website = {
        publicPath : "http://localhost:8080/"
    }
}



module.exports = {
    devtool:'eval-source-map', //调试
    // 暴露接口
    entry:entry.path,
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js',
        publicPath:website.publicPath
    },
    module:{
        //规则
        rules:[
            // extractTextPlugin
            // 它将从每一个用到了require("*.css")的entry文件中抽离出css到单独的output文件

            {
                // 处理index中引用css样式规则
                test:/\.css$/,
                // loader:['style-loader','css-loader']，
                // use:['style-loader','css-loader']
                // use:[{
                //     loader:"style-loader"
                // },{
                //     loader:"css-loader"
                // }]
                //css分离
                use: extractTextPlugin.extract({ 
                fallback: "style-loader",
                use: [{
                    loader:'css-loader',options:{importLoaders:1}
                },'postcss-loader']
                })
            },
            {
                test:/\.(jsx|js)$/,
                use:[{
                    loader:"babel-loader"
                    // options:{
                    //     presets:["es2015","react"]
                    // }
                }],
                exclude:'/node_modules'
                // loader:'babel-loader'
            },
            {
                test:/\.(png|jpg|gif)/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit:5000,
                        outputPath:'images/' // 图片生成路径设置
                    }
                }]
            },
            {
                test:/\.(htm|html)$/i,
                use:['html-withimg-loader']
            },
            {
                test:/\.less$/,
                // use:[{
                //     loader:'style-loader'
                // },{
                //     loader:'css-loader'
                // },{
                //     loader:'less-loader'
                // }]
                use:extractTextPlugin.extract({
                    // 打包到index.css文件中 和分离less文件
                    use:[{
                        loader:'css-loader'
                    },{
                        loader:'less-loader'
                    }],
                    fallback: "style-loader"
                }) 
            },
            {
                test:/\.scss$/,
                // 打包
                // use:[{
                //     loader:"style-loader",
                // },{
                //     loader:"css-loader"
                // },{
                //     loader:"sass-loader"
                // }]
                use:extractTextPlugin.extract({
                    // 打包到index.css文件中 和分离less文件
                    use:[{
                        loader:'css-loader'
                    },{
                        loader:'sass-loader'
                    }],
                    fallback: "style-loader"
                }) 
            }
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery",
            JQuery:"jquery" // 安装和引用第三方插件
        }),
        new uglify(),
        new htmlPlugin({
            minify:{

                removeAttributeQuotes:true
            },
            hash:true, // 防止同名引起的缓存
            template:'./src/index.html'
        }),
        new extractTextPlugin("css/index.css"), //生成后图片的路径
        new purifyCssPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html')) //搜索这个文件夹下的所有html文件
            
        })

    ], //插件
    devServer:{
        // 开发目录
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:8080
    },
    watchOptions:{
        poll:1000,
        aggregateTimeout:500,
        ignored:/node_modules/,
    }
}